<template>
  <div v-if="isgenerateBlog" class="PPT" @mouseup="MicrophoneActive = false">
    <h3><span></span><span>博客生成</span></h3>
    <p class="introduce">根据用户指定的主题和关键词，自动生成结构清晰、高质量的博客文章，帮助用户快速发布博客。</p>
    <el-card class="PPT-card">
      <p class="PPT-card-title">博客主题<span>(必填项)</span></p>
      <div class="PPT-card-input">
        <div class="input-button" style="display: flex;">
          <div v-show="search.length > 0" @click="search = ''" class="icon-clear"></div>
          <div :class="`icon-Microphone ${MicrophoneActive ? 'Microphone-active' : ''}`"
            @mousedown="MicrophoneActive = true"></div>

        </div>
        <el-input class="textareaInput" resize="none" type="textarea" v-model="search" style="width: 100%;"
          placeholder="帮我生成一份博客，主题是：">
        </el-input>
      </div>
      <div class="PPT-card-addFile">
        <p>选择图片/文件</p>
        <div class="PPT-card-file">
          <div v-for="item, index in dataList" class="file-item">
            <div @click="dataList = dataList.filter((ite, ind) => ind !== index)"></div>
            <span>{{ item.split('/')[item.split('/').length - 1] }}</span>
          </div>

          <div class="icon-addition" @click="FileDialog = true">
            <span class="icon-addition-lable">添加</span>
          </div>

        </div>

      </div>

      <div class="PPT-card-button">
        <el-button class="submit" @click="submit" type="primary">生成</el-button>
      </div>
    </el-card>
    <el-dialog :show-close="false" align-center v-model="FileDialog" class="PPT-FileDialog" :before-close="handleClose">
      <FileSAearch message="确认" @download="download" class="PPT-Fileitem" />
    </el-dialog>
  </div>
  <generateBlog @back="setGenerateBlog(true)" :search="search" :filePaths="dataList.toString()" v-else />
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import FileSAearch from './FileSAearch.vue';
import { useBlogStore, usePPTStore } from '@/stores/index'
import { storeToRefs } from 'pinia'
import GenerateBlog from "@/views/PocketAI/components/generateBlog.vue";
const search = ref('')
const MicrophoneActive = ref(false)
const FileDialog = ref(false)
const stro = useBlogStore()
const { isgenerateBlog } = storeToRefs(stro)
const { setGenerateBlog } = stro
const dataList = ref([])

onMounted(() => {
  setGenerateBlog(true)
})

const download = (fileList) => {
  dataList.value = fileList
  FileDialog.value = false
}

const submit = () => {

  setGenerateBlog(false)
}
</script>

<style lang="scss" scoped>
.PPT {
  width: 100%;
  height: 100%;
  padding: 70px;

  h3 {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    span {

      display: flex;

      &:nth-child(1) {
        height: 20px;
        width: 20px;
        margin-right: 5px;
        background: url('@/icons/博客生成.svg') no-repeat center;
      }
    }
  }

  .introduce {
    color: #333;
    width: 100%;
    text-align: center;
    font-family: "Microsoft YaHei UI";
    font-size: 14px;
    margin-top: 11px;
  }

  .PPT-card {
    width: 100%;
    margin-top: 30px;
    padding: 20px;

    .PPT-card-title {
      font-size: 14px;
      font-weight: 600;

      span {
        color: #818391;
        font-size: 14px;
      }

    }

    .PPT-card-input {
      position: relative;
      margin-top: 26px;
      margin-bottom: 25px;

      :deep(.textareaInput) {
        .el-textarea__inner {

          height: 110px;
          padding: 16px;
          padding-right: 100px !important;
        }

        /* 隐藏默认的滚动条 */
        textarea::-webkit-scrollbar {
          width: 0;
          background: transparent;
          /* 将滚动条背景设置为透明 */
        }

        textarea {
          scrollbar-width: none;
          /* Firefox 隐藏滚动条 */
          -ms-overflow-style: none;
          /* IE 隐藏滚动条 */
        }
      }

      .input-button {
        display: flex;
        justify-content: end;
        align-items: center;
        position: absolute;
        width: 150px;
        right: 20px;
        bottom: 0;
        transform: translate(0, -50%);
        z-index: 1;


        .icon-clear {
          width: 16px;
          height: 16px;
          background: url('@/assets/image/clear.svg') no-repeat center;
        }

        .icon-Microphone {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          transition: all 0.5s;
          background: url('@/assets/image/Microphone.svg') no-repeat center;
        }

        .Microphone-active {
          background: url('@/assets/image/Microphone1.svg') no-repeat center;
          background-color: var(--el-color-primary);
        }


        div {
          &:nth-child(1) {
            margin-right: 10px;
          }
        }
      }
    }

    .PPT-card-addFile {
      .PPT-card-file {
        display: flex;

        .file-item {
          width: 40px;
          height: 40px;
          border-radius: 4px;
          background: url(<path-to-image>) lightgray 50% / cover no-repeat, url(<path-to-image>) lightgray 50% / cover no-repeat;
          background-color: #d7d7d7;
          position: relative;
          margin: 0 25px;

          span {
            margin-left: 0;
            /* 左边间距初始化 */
            margin-right: 10px;
            /* 右边间距 */
            white-space: nowrap;
            /* 防止换行 */
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translate(-50%, 0);
            color: #404040;
            font-size: 12px;
            display: inline-block;

          }

          div {
            content: '';
            position: absolute;
            right: -7px;
            top: -7px;
            display: flex;
            width: 16px;
            height: 16px;
            background: url('@/assets/image/失败.svg') no-repeat center;


          }
        }
      }

      p {
        color: #404040;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 16px;
      }

      .icon-addition {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        border: 1px solid #EBEBEB;
        background: #FFF;
        background: url('@/assets/image/addition.svg') no-repeat center;
        position: relative;
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
        margin-left: 30px;

        .icon-addition-lable {
          position: absolute;
          bottom: -22px;
          color: #404040;
          font-size: 12px;
        }
      }
    }

    .PPT-card-button {
      width: 100%;
      text-align: center;
      margin-top: 60px;
      margin-bottom: 26px;

      .submit {
        width: 310px;
        height: 36px;
      }

    }
  }

  :deep(.PPT-FileDialog) {
    width: 70%;
    height: 90%;
    border-radius: 12px;
    background: #F5F5F5;
    position: relative;

    .PPT-Fileitem {
      position: absolute;
      top: 0;

      .el-tabs__content {
        height: 450px;
      }
    }
  }
}
</style>
